<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./_semantic-ui@2.4.2@semantic-ui/dist/semantic.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./_semantic-ui@2.4.2@semantic-ui/dist/semantic.min.js"></script>
    <script src="./js/template-web.js"></script>
    <style>
        body{
            padding: 20px;
        }
        h1 {
        padding: 20px 0;
        text-align: center;
        }
    </style>
</head>

<body>
    <h1>heros</h1>
    <button class="ui primary button" id="add">
        添加
    </button>
    <table class="ui celled table">
        <thead>
            <tr>
                <th>编号</th>
                <th>英雄名称</th>
                <th>性别</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="myTbody">

        </tbody>

    </table>


    <!-- 添加弹出表单 -->
    <form class="ui form dimmer" id="addForm">
        <div class="ui modal " id="addModal">
            <!-- <i class="close icon"></i> -->
            <div class="header">
                个人信息
            </div>
            <div class="image content">
                <!-- <div class="ui medium image">
                            <img src="../images/avatar/large/chris.jpg">
                        </div> -->
                <div class="description">
                    <!-- <div class="ui header">我们为你自动选择了一张资料图片.</div>
                            <p>我们从<a href="https://www.gravatar.com" target="_blank">gravatar</a>抓取的下面这些图片，图像与你注册的邮箱地址相关.</p>
                            <p>可以使用这张照片吗?</p> -->
                    <div class="ui input focus" style="display:block; margin: 10px">
                        <label for="">姓名:</label><br>
                        <input name="first-name" type="text" placeholder="英雄姓名" style="width:80%; margin-left: 40px; box-sizing: border-box; ">
                    </div>
                    <div class="ui input focus" style="display:block; margin: 10px">
                        <label for="">性别:</label><br>
                        <input name="last-name" type="text" placeholder="英雄性别" style="width:80%; margin-left: 40px; box-sizing: border-box; ">
                    </div>
                </div>
            </div>
            <div class="actions">
                <div class="ui black deny button">
                    取消
                </div>
                <div class="ui positive right labeled icon button" id="addright">
                    确定
                    <i class="checkmark icon"></i>
                </div>
            </div>
        </div>
    </form>
    <!-- 添加弹出表单结束 -->
    <!-- 编辑 -->

    <form class="ui form dimmer" id="updateForm">
        <div class="ui modal" id="updateModal">
            <!-- <i class="close icon"></i> -->
            <div class="header">
                个人信息
            </div>
            <div class="image content">
                <!-- <div class="ui medium image">
                    <img src="../images/avatar/large/chris.jpg">
                </div> -->
                <div class="description">
                    <!-- <div class="ui header">我们为你自动选择了一张资料图片.</div>
                    <p>我们从<a href="https://www.gravatar.com" target="_blank">gravatar</a>抓取的下面这些图片，图像与你注册的邮箱地址相关.</p>
                    <p>可以使用这张照片吗?</p> -->
                    <div class="ui input focus" style="display:block; margin: 10px">
                        <label for="">姓名:</label><br>
                        <input name="first-name-update" type="text" placeholder="英雄姓名" style="width:80%; margin-left: 40px; box-sizing: border-box; ">
                    </div>
                    <div class="ui input focus" style="display:block; margin: 10px">
                        <label for="">性别:</label><br>
                        <!-- ****************************************************************************** -->
                    
                        <!-- ****************************************************************************** -->
                        <input name="last-name-update" type="text" placeholder="英雄性别" style="width:80%; margin-left: 40px; box-sizing: border-box; ">
                    </div>
                </div>
            </div>
            <div class="actions">
                <div class="ui black deny button">
                    取消
                </div>
                <div class="ui positive right labeled icon button" id="updateright">
                    确定
                    <i class="checkmark icon"></i>
                </div>
            </div>
        </div>
        <!-- <div class="field">
            <label>英雄姓名</label>
            <input type="text" name="first-name-update" placeholder="英雄姓名">
        </div>
        <div class="field">
            <label>性别</label>
            <input type="text" name="last-name-update" placeholder="性别">
        </div>
        <button class="ui button primary" id="upBtn">
            提交
        </button> -->

    </form>
    <!-- 编辑结束 -->
    <script type="text/template" id="temp">
        {{each data value index}}
        <tr>
            <td>
                <div class="ui ribbon label {{value.isdel === '0' ? 'blue' : 'red'}}" >{{value.isdel === '0' ? '正常 ' : '删除'}}</div>
            </td>
            <td>{{value.name}}</td>
            <td>{{value.gender}}</td>
            <td>
                {{value.ctime}} 
            </td>
            <td>
                <button class="ui primary button update" data-id={{value.id}}>
                    编辑
                </button>
                <button class="ui button green  start" data-id={{value.id}}>
                    启用
                </button>
                <button class="ui button red del" data-id={{value.id}}>
                    删除
                </button>
            </td>
        </tr>
             
        {{/each}}
    </script>
    <script>
        // 请求
        let p = new Promise((resolve, reject) => {
            $.ajax({
                url: "http://127.0.0.1:3210/getallhero",
                dataType: "json",
                success: function (success) {
                    // console.log(success);
                    let html = template('temp', {
                        data: success.data
                    });
                    $('#myTbody').html(html);
                }
            })
        })




        // 点击添加 添加英雄
        $('#add').on('click', () => {
            $('#addModal').modal('show');
        })
        $('#addright').on('click', function () {
            let name = $('[name=first-name]').val();
            // console.log(name);

            let gender = $('[name=last-name]').val();
            $.ajax({
                url: "http://127.0.0.1:3210/addhero",
                type: 'post',
                data: {
                    name,
                    gender
                },
                success: (res) => {
                    // console.log(res);
                    location.reload();
                }
            })
        })
        // 点击编辑 更新英雄信息
        $('#myTbody').on('click', '.update', function (e) {
            let id = $(this).data('id');
            $.ajax({
                url: "http://127.0.0.1:3210/gethero/" + id + "",
                success: (res) => {
                    // console.log(res);
                    // location.reload();
                    let name = res.data[0].name;
                    let gender = res.data[0].gender;
                    // console.log(name);

                    $('[name=first-name-update]').val(name);
                    // console.log(name);
                    $('[name=last-name-update]').val(gender);
                }
            })


            // console.log(id);
            $('#updateModal').modal('show');
            // $('#updateForm').dimmer('show');
            $('#updateright').on('click', function (e) {
                e.preventDefault();
                let name = $('[name=first-name-update]').val();
                // console.log(name);
                let gender = $('[name=last-name-update]').val();
                $.ajax({
                    url: "http://127.0.0.1:3210/updatehero/" + id + "",
                    type: 'post',
                    data: {
                        name,
                        gender
                    },
                    success: (res) => {
                        // console.log(res);
                        location.reload();
                    }
                })
            })
        })


        // 点击删除 软删除英雄
        $('#myTbody').on('click', '.del', function () {
            let id = $(this).data('id');
            $.ajax({
                url: "http://127.0.0.1:3210/deletehero/" + id + "",
                success: (res) => {
                    // console.log(res);
                    if (res.status === 200) {
                        location.reload()
                    }
                }
            })
        })
        // 启用英雄
        $('#myTbody').on('click', '.start', function () {
            let id = $(this).data('id');
            $.ajax({
                url: "http://127.0.0.1:3210/starthero/" + id + "",
                success: (res) => {
                    console.log(res);
                    if (res.status === 200) {
                        location.reload()
                    }
                }
            })
        })
    </script>
</body>

</html>